<template>
  <a-card>
    <a-form :model="form" layout="vertical">
      <a-row justify="space-between" align="middle">
        <a-col>
    <CommonTitle title="工商信息" />

        </a-col>
        <a-col>
          <a-button type="link">更新信息</a-button>
        </a-col>
      </a-row>

      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item label="登记注册类型">
            <a-input v-model:value="form.registrationType" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="成立日期">
            <a-date-picker v-model:value="form.establishmentDate" style="width: 100%" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item label="法定代表人">
            <a-input v-model:value="form.legalRepresentative" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="法人证件号">
            <a-input v-model:value="form.legalRepId" placeholder="请填写法人身份证号" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item label="注册资本">
            <a-input-number v-model:value="form.registeredCapital" addon-after="万元" style="width: 100%" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="经营状态">
            <a-select v-model:value="form.businessStatus">
              <a-select-option value="在营（开业）">在营（开业）</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col :span="24">
          <a-form-item label="营业期限">
            <a-range-picker v-model:value="form.businessTerm" style="width: 100%" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col :span="24">
          <a-form-item label="经营范围">
            <a-textarea v-model:value="form.businessScope" :rows="4" />
          </a-form-item>
        </a-col>
      </a-row>

      <a-divider />

      <a-row justify="space-between" align="middle">
        <a-col>
          <CommonTitle title="股东信息" />
        </a-col>
        <a-col>
          <a-button type="primary" @click="addShareholder">新增股东</a-button>
        </a-col>
      </a-row>
      <a-table :columns="shareholderColumns" :data-source="shareholders" row-key="id" bordered style="margin-top: 16px">
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'action'">
            <a @click="deleteShareholder(record.id)">删除</a>
          </template>
        </template>
      </a-table>

      <a-divider />

      <CommonTitle title="银行" />
      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item label="基本户开户银行">
            <a-input v-model:value="form.bankName" placeholder="请填写" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="基本户开户行号">
            <a-input v-model:value="form.bankAccount" placeholder="请填写" />
          </a-form-item>
        </a-col>
      </a-row>

      <a-divider />

      +<CommonTitle title="税务信息" />
      <a-row :gutter="16">
        <a-col :span="24">
          <a-form-item label="税务注册地址">
            <a-input v-model:value="form.taxRegistrationAddress" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item label="主管税务机关">
            <a-select v-model:value="form.taxAuthority">
              <a-select-option value="国家税务总局佛山市高明区税务...">国家税务总局佛山市高明区税务...</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="税务机关地址">
            <a-input v-model:value="form.taxAuthorityAddress" placeholder="请填写" />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </a-card>
</template>

<script setup>
import { reactive, ref } from 'vue';
import dayjs from 'dayjs';

const form = reactive({
  registrationType: '有限责任公司（自然人投资或控股）',
  establishmentDate: dayjs('2020-06-16'),
  legalRepresentative: '卢莉英',
  legalRepId: '',
  registeredCapital: 100,
  businessStatus: '在营（开业）',
  businessTerm: [dayjs('2020-06-16'), dayjs('9999-01-01')],
  businessScope:
    '一般项目：税务服务；财务咨询；业务培训（不含教育培训、职业技能培训等需取得许可的培训）；商务代理代办服务；市场调查（不含涉外调查）；社会经济咨询服务；环保咨询服务；单位后勤管理服务；企业会员积分管理服务。（除依法须经批准的项目外，凭营业执照依法自主开展经营活动）许可项目：代理记账。（依法须经批准的项目，经相关部门批准后方可开展经营活动，具体经营项目以相关部门批准文件或许可证件为准）',
  bankName: '',
  bankAccount: '',
  taxRegistrationAddress: '佛山市高明区荷城街道沧江路435号福泰华庭首层10号第二卡商铺（住所申报）',
  taxAuthority: '国家税务总局佛山市高明区税务...',
  taxAuthorityAddress: '',
});

const shareholderColumns = [
  { title: '股东名称', dataIndex: 'name', key: 'name' },
  { title: '股东类型', dataIndex: 'type', key: 'type' },
  { title: '证照、证件类型', dataIndex: 'licenseType', key: 'licenseType' },
  { title: '证照、证件号', dataIndex: 'licenseNumber', key: 'licenseNumber' },
  { title: '国籍或注册地', dataIndex: 'nationality', key: 'nationality' },
  { title: '认缴额', dataIndex: 'subscribedCapital', key: 'subscribedCapital' },
  { title: '实缴额', dataIndex: 'paidInCapital', key: 'paidInCapital' },
  { title: '持股比例(%)', dataIndex: 'shareholdingRatio', key: 'shareholdingRatio' },
  { title: '操作', key: 'action' },
];

const shareholders = ref([
  { id: 1, name: '卢莉英', type: '自然人', licenseType: '--', licenseNumber: '--', nationality: '--', subscribedCapital: 64.0, paidInCapital: '--', shareholdingRatio: 6 },
  { id: 2, name: '苗微', type: '自然人', licenseType: '--', licenseNumber: '--', nationality: '--', subscribedCapital: 10.0, paidInCapital: '--', shareholdingRatio: 1 },
  { id: 3, name: '管守明', type: '自然人', licenseType: '--', licenseNumber: '--', nationality: '--', subscribedCapital: 26.0, paidInCapital: '--', shareholdingRatio: 2 },
]);

const addShareholder = () => {
  // Logic to add a shareholder, probably involves a modal
  console.log('Add shareholder');
};

const deleteShareholder = (id) => {
  shareholders.value = shareholders.value.filter((item) => item.id !== id);
};
</script>

<style lang="less" scoped>
:deep(.ant-card-body) {
  padding: 10px;
}
</style>
